<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>RadioBox</title>
    <script type="text/javascript" src="../vendor/jquery-1.9.1.min.js"></script>
    <style>
        .beauty_radio-box {
            display: inline-block;
            width: 18px;
            height: 18px;
            border: 1px solid #008fff;
            border-radius: 50%;
            position: relative;
            vertical-align: middle;
        }
        
        .img_radio_box{
            display: inline-block;
            width: 18px;
            height: 18px;
            position: relative;
            vertical-align: middle;
        }

        .img_radio_box>input[type='radio'],
        .beauty_radio-box > input[type='radio'] {
            opacity: 0;
            position: absolute;
            margin: 2.5px;
            top: 0;
            left: 0;
        }

        .beauty_radio-box > span {
            display: inline-block;
            width: 10px;
            height: 10px;
            margin: 4px;
            border-radius: 50%;
            background-color: #fff;
        }
        
        .img_radio_box>span{
            display: inline-block;
            width: 100%;
            height: 100%;
            background: url(../public/img_radio.png) center center no-repeat;
        }

        .beauty_radio-box > input[type='radio']:checked ~ span {
            background-color: #008fff;
        }

        .img_radio_box>input[type='radio']:checked~span{
            background-image: url(../public/img_radio_checked.png);
        }
    </style>
    <script>
        (function ($) {
            var cache = {};

            $.fn.beautyRadioBox = function () {
                $(this).length===1?beautyRadioBox($(this)):$(this).each(function(){
                    beautyRadioBox($(this));
                });
            };

            $.fn.imgRadioBox=function(){
                $(this).length===1?imgRadioBox($(this)):$(this).each(function(){
                   imgRadioBox($(this));
                });
            };

            function beautyRadioBox($input) {
                var oldId = $input.attr("id") || "beauty_radio-box",
                        newId = cacheAndCreateNewId(oldId);
                $input.attr("id", newId);
                $input.wrap("<label class='beauty_radio-box' for='" + newId + "'></label>")
                        .parent().append("<span></span>");
            }

            function imgRadioBox($input){
                var oldId=$input.attr("id")||"img_radio_box",
                        newId=cacheAndCreateNewId(oldId);
                $input.attr("id",newId);
                $input.wrap("<label class='img_radio_box' for='" + newId + "'></label>")
                        .parent().append("<span></span>");
            }

            function cacheAndCreateNewId(oldId) {
                if (cache.hasOwnProperty(oldId)) {
                    cache[oldId] = cache[oldId] + 1;
                } else {
                    cache[oldId] = 0;
                }
                var newId = oldId + cache[oldId];
                return newId;
            }
        })(jQuery);

        $(function(){
            $("#beautyRadio1").beautyRadioBox();
            $("#imgRadio1").imgRadioBox();
        })
    </script>
</head>
<body>
<label class="beauty_radio-box" for="beautyRadio">
    <input type="radio" id="beautyRadio" name="Text"/>
    <span></span>
</label>

<input type="radio" name="Text" id="beautyRadio1"/>

<label class="img_radio_box" for="imgRadio">
    <input type="radio" id="imgRadio" name="Test"/>
    <span></span>
</label>

<input type="radio" id="imgRadio1" name="Test"/>
</body>
</html>